<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            点评列表
            <ExclamationCircleOutlined />
          </div>
          <div class="titleLeft">
            <a-button
              class="search_Button confirm"
              :icon="h(SyncOutlined)"
              type="primary"
              @click="refreshData"
              >刷新数据</a-button
            >
          </div>
        </header>
      </template>
      <div class="app-container">
        <a-form ref="formRef" :model="formState" layout="inline">
          <a-form-item ref="name" label="用户名称" name="name">
            <a-input
              v-model:value="formState.name"
              class="my-input"
              placeholder="请输入用户名称"
            />
          </a-form-item>
          <a-form-item ref="name" label="关键词" name="keyword">
            <a-input
              v-model:value="formState.keyword"
              class="my-input"
              placeholder="请输入关键词"
            />
          </a-form-item>
          <a-form-item label="点评时间" name="date1">
            <a-range-picker v-model:value="formState.date1" />
          </a-form-item>
          <a-form-item label="游戏评分" name="region">
            <a-select
              v-model:value="formState.region"
              placeholder="请选择"
              class="my-input"
            >
              <a-select-option value="shanghai">全部</a-select-option>
              <a-select-option value="beijing">未发布</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button
              style="margin-top: 4px"
              type="primary"
              class="search_Button confirm"
              @click="onSubmit"
              >确定</a-button
            >
            <a-button
              style="margin-left: 10px; border-radius: 2px 2px"
              @click="resetForm"
              >重置</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <!-- <CommonTable
      ref="commonTable"
      :is-select="true"
      :columns="columns"
      :dataSource="dataSource"
      :total="dataSource.length"
      :isLoading="isLoading"
      @getPageParams="getPageParams"
      @get-table-sort="getTableSort"
      @getSelectColumn="getSelectColumn"
    >
      <template #bodyCell="{ column, text,record }">
        <template v-if="column.dataIndex === 'operation'">
        <span>
          <i class="details" type="primary" @click="onView(column, text, record)">查看详情</i>
        </span>
        </template>comment_content_title
        <template v-else-if="column.dataIndex ==='image'">
          <a-image
            :width="30"
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          />
          {{ record.address }}
        </template>
      </template>
    </CommonTable> -->
    <!-- <a-button @click="handleBatchDelete">批量删除</a-button> -->
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :loading="false"
      @change="handleTableChange"
      rowClassName="custom-row"
      :row-selection="{
        selectedRowKeys: state.selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template v-slot:bodyCell="{ record, column }">
        <!-- <span v-if="record.status=='success'" class="unread" @click="view(record)"> -->
        <span v-if="column.key === 'status'">
          <a-tag
            class="all-read-buitton"
            :bordered="false"
            :color="statusColor(record.status)"
            >{{ record.status }}</a-tag
          >
        </span>
        <span v-else-if="column.key === 'message'">
          <a-tag
            class="all-read-buitton"
            :bordered="false"
            :color="record.status"
            >{{ statusColor(record.status) }}</a-tag
          >{{ record[column.key] }}
        </span>
        <!-- <span v-else>
              {{ record[column.key] }}
            </span> -->
        <!-- </span> -->
        <!-- <span v-else class="read">{{ record[column.key] }}</span> -->
        <span v-else-if="column.key === 'action'">
          <a-tag
            class="all-read-buitton"
            style="color: #31bc63"
            :bordered="false"
            @click="doAction('reply', record)"
            >回复</a-tag
          >
          <a-tag
            class="all-read-buitton"
            style="color: #31bc63"
            :bordered="false"
            @click="doAction('delete', record)"
            >删除</a-tag
          >
          <a-tag
            class="all-read-buitton"
            style="color: #31bc63"
            :bordered="false"
            @click="doAction('view', record)"
            >查看</a-tag
          >
        </span>
      </template>
    </a-table>
    <div class="pagination-box">
      <a-row>
        <a-col :span="8">
          <a-tag
            color="error"
            :bordered="false"
            class="all-read-buitton"
            @click="doAction('batches')"
            >批量删除</a-tag
          >
        </a-col>
        <a-col :span="16">
          <a-pagination
            v-model:current="pagination.current"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            show-size-changer
            show-quick-jumper
            size="small"
            :show-total="total => `共 ${pagination.total} 项数据`"
            @change="handleTableChange"
            class="pagination"
          />
        </a-col>
      </a-row>
    </div>
    <diaoReviewDetails
      :visible="isModalVisible"
      :message="modalMessage"
      @update:visible="isModalVisible = $event"
    />
  </div>
</template>

<script setup>
import { ref, reactive, toRaw, computed, h } from 'vue'
// import CommonTable from "../../components/myTable/indexView.vue";
import diaoReviewDetails from './diao-reviewDetails.vue'
import { cloneDeep } from 'lodash'
import {
  MailOutlined,
  SyncOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue'

const columns = [
  {
    title: '用户名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    resizable: true,
    // maxWidth: 200,
    // minWidth: 75,
    width: 100,
    sorter: false,
  },
  {
    title: '点评时间',
    width: 100,
    dataIndex: 'age',
    align: 'center',
    key: 'age',
    sorter: true,
  },
  {
    title: '游戏评分',
    dataIndex: 'tags',
    align: 'center',
    key: 'tags',
    width: 100,
    sorter: true,
  },
  {
    title: '评论内容',
    align: 'center',
    dataIndex: 'address',
    key: '2',
    width: 100,
    sorter: true,
  },
  {
    title: '设备型号',
    dataIndex: 'image',
    align: 'center',
    key: '3',
    width: 140,
  },
  {
    title: '回复数量',
    align: 'center',
    dataIndex: 'address',
    key: 'name',
    width: 100,
  },
  {
    title: '点赞数量',
    align: 'center',
    dataIndex: 'address',
    key: '4',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'action',
    align: 'center',
    // maxWidth: 200,
    minWidth: 75,
    width: 100,
    sorter: false,
  },
]

const dataSource = ref(
  Array.from({ length: 11 }, (_, i) => ({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ['cool', 'teacher'],
    icon: '1',
    img: '1',
    c: '1',
    d: '1',
    e: '1',
    field: '1',
    GamepadButton: '1',
    h: '1',
    g: '1',
    j: '1',
  })),
)
const refreshData = () => {
  console.log('refreshData: ', 'refreshData')
}
const formRef = ref()
const formState = reactive({
  name: '',
  region: undefined,
  date1: undefined,
  keyword: '',
})
const onSubmit = () => {
  console.log('values', formState, toRaw(formState))
}
const resetForm = () => {
  formRef.value.resetFields()
}
const pagination = ref({
  current: 1,
  pageSize: 20,
  total: dataSource.value.length,
})

const handleTableChange = (page, pageSize) => {
  console.log('handleTableChange=>分页回调pag, filters, sorter', page, pageSize)
  console.log('handleTableChange=>pagination', pagination.value)
  pagination.value.current = page
  if (pageSize) {
    pagination.value.pageSize = pageSize
  }
  // getList();//重新获取列表
}
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})
const hasSelected = computed(() => state.selectedRowKeys.length > 0)
const start = () => {
  state.loading = true
  setTimeout(() => {
    state.loading = false
    state.selectedRowKeys = []
  }, 1000)
}
const onSelectChange = selectedRowKeys => {
  console.log('selectedRowKeys changed: ', selectedRowKeys)
  state.selectedRowKeys = selectedRowKeys
}

const isLoading = ref(false)
const commonTable = ref(null)

const getPageParams = (start, length) => {
  console.log('分页数据：', start, length)
}

const getSelectColumn = rows => {
  console.log('选择的数据：', rows)
}

const getTableSort = sorter => {
  if (sorter.order) {
    console.log(
      sorter.order === 'ascend' ? '升序' : '降序',
      '排序表头字段：',
      sorter.field,
    )
  } else {
    console.log('默认顺序----')
  }
  console.log('排序数据：', sorter)
}

const onView = item => {
  console.log('View item:', item)
}

const doAction = (action, row) => {
  console.log('row: ', row)
  console.log('action: ', action)
  // dataSource.value = dataSource.value.filter(item => item.key !== key);
  // if(state.selectedRowKeys.length){
  //   console.log('state.selectedRowKeys: ', state.selectedRowKeys);
  // }
  if (action === 'delete') {
    console.log('action:delete ', action)
    dataSource.value = dataSource.value.splice(0, 1, row.key)
  } else if (action === 'batches' && state.selectedRowKeys.length) {
    console.log('batches: ', 1111)
    console.log('state.selectedRowKeys: ', state.selectedRowKeys)
  } else if (action === 'reply') {
    console.log('row: ', row)
  } else if (action === 'view') {
    console.log('action:view ', action)
    isModalVisible.value = true
    modalMessage.value = row
  }
}
const isModalVisible = ref(false)
const modalMessage = ref(null)

const handleAdd = () => {
  const newData = {
    key: `${dataSource.value.length}`,
    name: `Edward King ${dataSource.value.length}`,
    age: 32,
    address: `London, Park Lane no. ${dataSource.value.length}`,
  }
  dataSource.value.push(newData)
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
<style lang="less" scoped>
.read {
  color: black;
}
.unread {
  color: black;
  cursor: pointer;
}
.pagination-box {
  margin-top: 10px;
  font-size: 14px;
  color: #31bc63;
}
.pagination {
  text-align: right;
}
.all-read-buitton {
  cursor: pointer;
}
</style>
